import type { FC } from "react";
import { Space, Button } from "antd";
import { useMemoizedFn } from "ahooks";
import { useNavigate } from "react-router";
import PageWrapper from "@/components/PageWrapper";
import { ProTable, type ProColumns } from "@ant-design/pro-components";

type VenueItem = Fields.Venue.VenueItem;
type Column = ProColumns<VenueItem>;

const VenueList: FC = () => {
  const navigate = useNavigate();

  const columns: Column[] = [
    {
      dataIndex: 'name',
      title: '名称'
    },
    {
      dataIndex: 'status',
      title: '状态',
      hideInSearch: true,
    },
    {
      dataIndex: 'createdAt',
      title: '创建时间',
      hideInSearch: true,
    },
    {
      dataIndex: 'updatedAt',
      title: '更新时间',
      hideInSearch: true,
    },
    {
      title: '操作',
      hideInSearch: true,
      width: '100px',
      render: () => {
        return (
          <Space size={6}>
            <Button
              type="link"
              size="small"
            >
              编辑
            </Button>
            <Button
              type="link"
              size="small"
              danger
            >
              删除
            </Button>
          </Space>
        );
      }
    }
  ];

  const dataSource: VenueItem[] = [
    {
      id: 1,
      merchantId: 2,
      type: 1,
      name: '北京鸟巢',
      province: '北京市',
      city: '北京市',
      district: '北京市',
      street: '鸟巢体育',
      longitude: '108.12',
      latitude: '109.12',
      serviceLine: '18981921604',
      description: '哈哈哈',
      isCertified: true,
      status: 1,
      createdAt: '2023/12/08 12:00:00',
      updatedAt: '2023/12/09 12:00:00'
    }
  ];

  const handleAdd = useMemoizedFn(() => {
    navigate("/venue/list/1223/halls/create");
  });

  return (
    <PageWrapper>
      <ProTable
        rowKey="id"
        columns={columns}
        dataSource={dataSource}
        toolBarRender={() => {
          return [
            <Button
              key="add"
              type="primary"
              onClick={handleAdd}
            >
              新建厅
            </Button>
          ];
        }}
      />
    </PageWrapper>
  );
}

export default VenueList;